<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全屏或区域全屏轮播</title>
    <style>
        .bodyPageWrapper{ width:100%; height:0; overflow:hidden; position:relative;padding-bottom: 42%;min-width: 1200px}
        .bodyPage{ width:100%; min-height:100%; height:100%; position:absolute; top:0; left:0; }
        img.bg { position:absolute; top: 0px; left: 0px; z-index:1; display:none;}
        .bodyPageWrapper .hd{ width:100%;height:2px; overflow:hidden; position:absolute; bottom:20px; z-index:1; }
        .bodyPageWrapper .hd ul{ overflow:hidden; zoom:1; margin: 0 auto; width:108px;}
        .bodyPageWrapper .hd ul li{ float:left; margin:0 2px; width:50px; height:2px; background:#ccc; cursor:pointer; }
        .bodyPageWrapper .hd ul li.on{ background:rgb(36,177,177);}
    </style>
</head>
<body style="min-width: 1200px">
<div id="bodyPage" class="bodyPageWrapper">
    <div class="bodyPage">
        <img src="./img/banner.png" class="bg"/>
        <img src="./img/banner2.png" class="bg" />
    </div>
    <div class="hd"><ul><li class="dot_item on"></li><li></li></ul></div>
</div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
<script src="./fullplay.js"></script>
<script>
    $(function () {
        $("#bodyPage").fullImages({
            ImgWidth: 1920, // 图片真实宽度
            ImgHeight: 800, // 图片真实高度
            autoplay :  3500,   // 自动切换时间（毫秒）
            fadeTime : 1500,    // 隐藏动画时间
            minWidth: 1200,     // 最小宽度
            imgWrapperClass: 'bodyPage', // 存放图片的容器样式
            dotClass: 'dot_item', // dot 样式
            dotActiveClass: 'on' // dot 选中样式
        });
    })
</script>
</body>
</html>